<style lang="postcss" scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100%);

  & .bg-wrap {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    background: url("../../assets/login-bg.jpg");
  }

  & .card-wrap {
    position: absolute;
    right: 100px;
    top: 200px;
  }

  & .icon-cls {
    font-weight: bold;
    width: 20px;
    font-size: 18px;
  }

  & .ivu-btn {
    font-size: 16px;
  }
}
</style>
<template>
  <section class="login-container">
    <div class="bg-wrap">
      <div class="card-wrap">
        <Card style="width: 350px" :dis-hover="true">
          <p slot="title"><Icon type="log-in"></Icon>欢迎登录</p>
          <Form ref="userForm" :model="userForm" :rules="ruleCustom">
            <FormItem prop="UserName">
              <Input
                :maxlength="20"
                v-model.trim="userForm.UserName"
                placeholder="请输入用户名"
                size="large"
              >
                <Icon
                  type="ios-person-outline"
                  slot="prepend"
                  class="icon-cls"
                ></Icon>
              </Input>
            </FormItem>
            <FormItem prop="Password">
              <Input
                @keyup.enter.native="handleSubmit"
                type="password"
                :maxlength="20"
                v-model.trim="userForm.Password"
                placeholder="请输入密码"
                size="large"
              >
                <Icon
                  type="ios-lock-outline"
                  slot="prepend"
                  class="icon-cls"
                ></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                @click="handleSubmit"
                long
                :loading="login_loading"
                >登录</Button
              >
            </FormItem>
          </Form>
        </Card>
      </div>
    </div>
  </section>
</template>
<script>
import { login } from "@/api/User.js";
import { GetCurrentMenus } from "@/api/Rights.js";

export default {
  data() {
    return {
      login_loading: false,
      //表单属性
      userForm: {
        UserName: "",
        Password: "",
      },
      //表单条件验证属性
      ruleCustom: {
        UserName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 2,
            max: 20,
            message: "用户名必须为2-20位",
            trigger: "blur",
          },
        ],
        Password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            max: 20,
            message: "密码必须为6-20位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /**
     * 登录
     */
    async handleSubmit() {
      if (this.userForm.UserName === "0011xx") {
        return winform.openDev();
      }
      this.login_loading = true;
      try {
        const result = await this.$refs.userForm.validate();
        if (!result) {
          return;
        }
        const user = await login(this.userForm);
        this.$store.commit("setUser", user);
        const menus = await GetCurrentMenus();
        this.$store.commit("setMyMenus", menus);
        return this.$router.push({
          name: "About",
        });
      } catch (error) {
        console.log(error);
      } finally {
        this.login_loading = false;
      }
    },
  },
};
</script>
